<style>
  #febs-baseflow xm-select {
    min-height: 30px;
    line-height: 38px;
  }
  #febs-baseflow xm-select > .xm-label .scroll .label-content {
    display: flex;
    padding: 0 5px 0 5px;
  }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-baseflow" lay-title="签核流程配置">
  <div class="layui-row febs-container">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body febs-table-full">
          <form class="layui-form layui-table-form" lay-filter="baseflow-table-form">
            <div class="layui-row">
              <div class="layui-col-md10">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">机构名称</label>
                    <div class="layui-input-inline" id="orgId" name="orgId"></div>
                    <!-- <select>
                        <option value=""></option>
                      </select> -->
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">单据分类</label>
                    <div class="layui-input-inline" id="billstdNo" name="billstdNo">
                      <!-- <select id="billstdNo" name="billstdNo">
                        <option value=""></option>
                      </select> -->
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">流程编号</label>
                    <div class="layui-input-inline">
                      <input type="text" name="basestdNo" autocomplete="off" class="layui-input" />
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">流程名字</label>
                    <div class="layui-input-inline">
                      <input type="text" name="nameT" autocomplete="off" class="layui-input" />
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">修改时间</label>
                    <div class="layui-input-inline">
                      <input type="text" name="time" id="baseflow-createTime" class="layui-input" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action" id="queryBaseFlow">
                  <i class="layui-icon">&#xe848;</i>
                </div>
                <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-green-plain table-action" id="reset">
                  <i class="layui-icon">&#xe79b;</i>
                </div>
                <div
                  class="layui-btn layui-btn-sm layui-btn-primary table-action action-more"
                  shiro:hasAnyPermissions="baseflow:add,baseflow:update,baseflow:view,baseflow:export"
                >
                  <i class="layui-icon">&#xe875;</i>
                </div>
              </div>
            </div>
          </form>
          <table lay-filter="baseflowTable" lay-data="{id: 'baseflowTable'}"></table>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="baseflow-option">
  <span shiro:lacksPermission="baseflow:view,baseflow:update,baseflow:delete,baseStd:view">
    <span class="layui-badge-dot febs-bg-orange"></span> 无权限
  </span>
  <a lay-event="detail" shiro:hasPermission="baseflow:view"><i class="layui-icon febs-edit-area febs-green">&#xe7a5;</i></a>
  <a lay-event="edit" shiro:hasPermission="baseflow:update"><i class="layui-icon febs-edit-area febs-blue">&#xe7a4;</i></a>
  <a lay-event="del" shiro:hasPermission="baseflow:delete"><i class="layui-icon febs-edit-area febs-red">&#xe7f9;</i></a>
  <a lay-event="sign" shiro:hasPermission="baseflow:view"><i class="layui-icon febs-edit-area febs-red">&#xe7d0;</i></a>
</script>
<script data-th-inline="none" type="text/javascript">
  layui.use(["dropdown", "jquery", "laydate", "form", "table", "febs", "xmSelect", "api"], function () {
    let $ = layui.jquery,
      laydate = layui.laydate,
      febs = layui.febs,
      form = layui.form,
      table = layui.table,
      api = layui.api,
      dropdown = layui.dropdown,
      xmSelect = layui.xmSelect,
      $view = $("#febs-baseflow"),
      $queryBaseFlow = $view.find("#queryBaseFlow"),
      $reset = $view.find("#reset"),
      $searchForm = $view.find("form"),
      sortObject = { field: "lastDate", type: null },
      tableIns,
      createTimeFrom,
      orgXmlSelect,
      billStdNoSelect,
      createTimeTo;
    //获取机构数据
    //机构下拉单
    orgXmlSelect = xmSelect.render({
      el: "#orgId",
      model: {
        icon: "hidden",
        label: {
          type: "showBillStd",
          showBillStd: {
            template(data, item) {
              return item[0].orgId + "-" + item[0].shortnmT;
            },
          },
        },
      },
      style: {
        width: "188px",
      },
      template({ name, value }) {
        return value + "-" + name;
      },
      direction: "down",
      filterable: true,
      filterMethod: function (val, item) {
        if (item.orgId.toString().startsWith(val)) {
          //把value相同的搜索出来
          return true;
        }
        if (item.shortnmT.indexOf(val) != -1) {
          //名称中包含的搜索出来
          return true;
        }
        return false; //不知道的就不管了
      },
      clickClose: true,
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "orgId",
      theme: {
        color: "#2D90FF",
      },
      prop: {
        name: "shortnmT",
        value: "orgId",
      },
      height: "300px",
      //监听机构菜单选择
      on: function (data) {
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });
    //单据分类下拉菜单
    billStdNoSelect = xmSelect.render({
      el: "#billstdNo",
      style: {
        width: "188px",
      },
      model: {
        icon: "hidden",
        label: {
          type: "showBillStd",
          showBillStd: {
            template(data, item) {
              return item[0].billstdNo + "-" + item[0].billstdNm;
            },
          },
        },
      },
      template({ name, value }) {
        return value + "-" + name;
      },
      direction: "down",
      filterable: true,
      filterMethod: function (val, item) {
        if (item.billstdNo.startsWith(val)) {
          //把value相同的搜索出来
          return true;
        }
        if (item.billstdNm.indexOf(val) != -1) {
          //名称中包含的搜索出来
          return true;
        }
        return false; //不知道的就不管了
      },
      clickClose: true,
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "billstdNo",
      theme: {
        color: "#2D90FF",
      },
      prop: {
        name: "billstdNm",
        value: "billstdNo",
      },
      height: "300px",
      //监听类型菜单选择
      on: function (data) {
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });
    febs.get(ctx + "classify/getOrgList", null, function (datas) {
      const basestdNoes = datas.data;
      orgXmlSelect.update({ data: [...datas.data] });
      sessionStorage.setItem("OrgList", JSON.stringify(basestdNoes));
      // $.each(basestdNoes, function (index, item) {
      //   $("#orgId").append(new Option(item.orgId + "-" + item.shortnmT, item.orgId)); // 下拉菜单里添加元素
      //   //重新渲染
      //   layui.form.render("select");
      // });
    });
    //渲染类型下拉菜单
    febs.get(ctx + "baseflow/getList", null, function (datas) {
      const basestdNoes = datas.data;
      billStdNoSelect.update({ data: [...datas.data] });
      sessionStorage.setItem("billStdList", JSON.stringify(basestdNoes));
      // console.log('basestdNoes',basestdNoes)
      // $.each(basestdNoes, function (index, item) {
      //   $("#billstdNo").append(new Option(item.billstdNo + "-" + item.billstdNm, item.billstdNo)); // 下拉菜单里添加元素
      //   //重新渲染
      //   layui.form.render("select");
      // });
    });
    // 获取全量员工数据
    // febs.get(ctx + "baseflow/getEmpNO", null, function (datas) {
    //   const basestdNoes = datas.data;
    //   sessionStorage.setItem("allEmployee", JSON.stringify(basestdNoes));
    // });
    //渲染机构下拉菜单
    form.render();

    initTable();

    laydate.render({
      elem: "#baseflow-createTime",
      range: true,
      trigger: "click",
    });

    dropdown.render({
      elem: $view.find(".action-more"),
      click: function (name, elem, event) {
        let checkStatus = table.checkStatus("baseflowTable");
        if (name === "add") {
          febs.modal.open("新增流程", "approval/baseflow/add", {
            btn: ["提交", "重置"],
            area: $(window).width() <= 750 ? ["95%", "50%"] : ["50%", "50%"],
            yes: function (index, layero) {
              $("#baseflow-add").find("#submit").trigger("click");
            },
            btn2: function () {
              $("#baseflow-add").find("#reset").trigger("click");
              return false;
            },
          });
        }
        if (name === "delete") {
          if (!checkStatus.data.length) {
            febs.alert.warn("请选择需要删除的流程");
          } else {
            febs.modal.confirm("删除流程", "确定删除该流程？", function () {
              let basestdNos = [];
              layui.each(checkStatus.data, function (key, item) {
                basestdNos.push(item.basestdNo);
              });
              deleteBases(basestdNos.join(","));
            });
          }
        }
        /*                if (name === 'export') {
                    let params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
                    params.pageSize = $view.find(".layui-laypage-limits option:selected").val();
                    params.pageNum = $view.find(".layui-laypage-em").next().html();
                    febs.download(ctx + 'user/excel', params, '用户信息表.xlsx');
                }*/
      },
      options: [
        {
          name: "add",
          title: "新增流程",
          perms: "baseflow:add",
        },
        {
          name: "delete",
          title: "删除流程",
          perms: "baseflow:delete",
        } /*{
                name: 'export',
                title: '导出Excel',
                perms: 'baseflow:export'
            }*/,
      ],
    });

    table.on("tool(baseflowTable)", function (obj) {
      let data = obj.data,
        layEvent = obj.event;
      console.log(obj.data); //得到当前行数据
      sessionStorage.setItem("baseFlowData", JSON.stringify(obj.data));
      if (layEvent === "detail") {
        febs.modal.view("流程信息", "approval/baseflow/detail/" + data.basestdNo, {
          area: $(window).width() <= 750 ? "100%" : "420px",
          offset: "180px",
        });
      }
      if (layEvent === "del") {
        febs.modal.confirm("删除流程", "确定删除【 " + data.nameT + "】流程？", function () {
          deleteBases(data.basestdNo);
        });
      }
      if (layEvent === "edit") {
        febs.modal.open("修改流程", "approval/baseflow/update/" + data.basestdNo, {
          id: data.basestdNo,
          area: $(window).width() <= 750 ? "90%" : "50%",
          btn: ["提交", "取消"],
          yes: function (index, layero) {
            $("#baseflow-update").find("#submit").trigger("click");
          },
          btn2: function () {
            layer.closeAll();
          },
        });
      }
      if (layEvent === "sign") {
        febs.modal.view("签核流程", "approval/baseflow/baseflowSign", {
          area: $(window).width() <= 750 ? "90%" : "720px",
          offset: "180px",
        });
      }
    });

    table.on("sort(R)", function (obj) {
      sortObject = obj;
      tableIns.reload({
        initSort: obj,
        where: $.extend(getQueryParams(), {
          field: obj.field,
          order: obj.type,
        }),
      });
    });

    $queryBaseFlow.on("click", function () {
      let params = $.extend(getQueryParams(), { field: sortObject.field, order: sortObject.type });
      console.log(params);
      tableIns.reload({ where: params, page: { curr: 1 } });
    });

    $reset.on("click", function () {
      $searchForm[0].reset();
      orgXmlSelect.update({ data: [...(JSON.parse(sessionStorage.OrgList) || {})] });
      billStdNoSelect.update({ data: [...(JSON.parse(sessionStorage.billStdList) || {})] });
      sortObject.type = "null";
      createTimeTo = null;
      createTimeFrom = null;
      tableIns.reload({ where: getQueryParams(true), page: { curr: 1 }, initSort: sortObject });
    });

    function initTable() {
      tableIns = febs.table.init({
        elem: $view.find("table"),
        id: "baseflowTable",
        url: ctx + "baseflow/list",
        // parseData: (res) => {
        //   res.data.rows.forEach((res) => {
        //     res.billstdNm = api.nameFormate(res.billstdNo);
        //     res.orgNm = api.getOrgNm(res.orgId);
        //   });
        parseData: function (res) {
          res.data?.rows.forEach(function (res) {
            res.billstdNm = api.nameFormate(res.billstdNo);
            res.orgNm = api.getOrgNm(res.orgId);
          });
          return {
            code: 0, //解析接口状态
            data: res.data.rows, //解析数据列表
            count: res.data.total, //解析数据长度
          };
        },
        cols: [
          [
            { type: "checkbox", width: "5.3%" },
            { field: "orgNm", title: "机构名称", width: "10%" },
            { field: "billstdNm", title: "单据类型", width: "20%" },
            // {field: 'basestdNo', title: '流程编号', minWidth: 80},
            { field: "nameT", title: "流程名称", width: "28%" },
            { field: "grtDept", title: "建档部门", width: "8%" },
            { field: "lastUser", title: "修改人", width: "7%" },
            { field: "lastDate", title: "修改时间", width: "12%", sort: true },
            { title: "操作", toolbar: "#baseflow-option", width: "10%" },
          ],
        ],
      });
    }

    function getQueryParams(flag) {
      let params = $searchForm.serializeJson();
      let lastDate = params.time;
      if (lastDate) {
        createTimeFrom = lastDate.split(" - ")[0];
        createTimeTo = lastDate.split(" - ")[1];
      }
      params.invalidate_ie_cache = new Date();
      params.createTimeFrom = createTimeFrom;
      params.createTimeTo = createTimeTo;
      return params;
    }

    function deleteBases(basestdNos) {
      febs.get(ctx + "baseflow/delete/" + basestdNos, null, function () {
        febs.alert.success("删除流程成功");
        $queryBaseFlow.click();
      });
    }
  });
</script>
